<template>
    <div class="blog-container">
      <!-- 博客分类导航 -->
      <nav class="blog-categories">
        <div class="categories-wrapper">
          <a-menu mode="horizontal" :selectedKeys="[activeIndex]" class="mobile-menu">
            <a-menu-item
              v-for="(item, index) in menuItems"
              :key="index.toString()"
              @click="handleMenuClick(item)"
              class="menu-item"
              style="color: #fff"
            >
              {{ item.name }}
            </a-menu-item>
          </a-menu>
        </div>
      </nav>
      <div class="blog-header">
        <div class="blog-title">{{blogTitle?blogTitle:'Style For Every Moment'}}</div>
      </div>
      <!-- 主要内容区域 -->
      <a-row :gutter="30" class="blog-content">
        <!-- 左侧主要内容 -->
        <a-col :xs="24" :sm="24" :md="activeIndex === '0' ? 16 : 24">
          <div v-if="!currentBlog">
            <!-- 空状态显示 -->
            <div v-if="!featuredPosts.length" class="empty-state">
              <div class="empty-image">
                <img src="/empty-blog.svg" alt="暂无博客" />
              </div>
              <h2 class="empty-title">There is currently no blog content available</h2>
              <p class="empty-description">We are working hard to create exciting content, please come back later to check</p>
            </div>
            <div v-else class="featured-posts">
              <a-row :gutter="30">
                <a-col
                  :xs="24"
                  :sm="12"
                  :md="activeIndex === '0' ? 12 : 8"
                  v-for="(post, index) in featuredPosts"
                  :key="index"
                >
                  <div class="post-card">
                    <div class="post-image-wrapper">
                      <a-image :alt="post.title" :src="post.thumbnail" @click="showBlogDetail(post)" class="post-image" />
                      <div class="post-overlay">
                        <div class="overlay-content" @click="showBlogDetail(post)">
                          <span class="read-now" >Read Now</span>
                        </div>
                      </div>
                    </div>
                    <div class="post-info">
                      <div class="post-meta">
                        <span class="post-date">{{post.published_at}}</span>
                        <span class="post-divider"></span>
                        <span class="post-category">{{ post.category?.name }}</span>
                      </div>
                      <h3 class="post-title" @click="showBlogDetail(post)">{{ post.title }}</h3>
                      <p class="description">{{ post.excerpt }}</p>
                      <div class="post-footer">
                        <button class="read-more-btn" @click="showBlogDetail(post)">
                          <span>Read Article</span>
                          <span class="btn-icon">→</span>
                        </button>
                      </div>
                    </div>
                  </div>
                </a-col>
              </a-row>
            </div>
          </div>
          <BlogDetail v-else :blog="blogDetail || {}" />
        </a-col>

        <!-- 右侧边栏 -->
        <a-col :xs="24" :sm="24" :md="8" v-if="activeIndex === '0'">
            <div class="sidebar-container">
              <div class="sidebar">
                  <h2 class="sidebar-title">EDITORS' PICKS</h2>
                  <div class="sidebar-content">
                      <!-- 侧边栏空状态 -->
                      <div v-if="!recentPosts.length" class="sidebar-empty-state">
                        <img src="/empty-sidebar.svg" alt="暂无推荐" class="sidebar-empty-image" />
                        <p class="sidebar-empty-text">No editor recommendations available at the moment</p>
                      </div>
                      <div class="sidebar-item" v-else v-for="(post, index) in recentPosts" :key="index">
                          <div class="sidebar-image-wrapper">
                              <a-image :alt="post.title" :src="post.thumbnail" class="sidebar-image" @click="showBlogDetail(post)" />
                              <div class="image-index">{{index + 1}}</div>
                              <div class="sidebar-overlay"></div>
                          </div>
                          <div class="sidebar-text">
                              <h4 class="sidebar-title-text" @click="showBlogDetail(post)">{{post.title}}</h4>
                              <p class="sidebar-desc">{{post.excerpt}}</p>
                              <button class="sidebar-read-more" @click="showBlogDetail(post)">
                                <span>Read More</span>
                                <span class="arrow">→</span>
                              </button>
                          </div>
                      </div>
                  </div>
              </div>
            </div>
        </a-col>
      </a-row>
      <template v-if="activeIndex === '0'">
        <div class="blog-divider" v-if="!currentBlog && featuredPosts.length > 0">
          <div class="divider-line"></div>
          <div class="divider-text">All Blog Articles</div>
          <div class="divider-line"></div>
        </div>
        <blog-articles v-if="!currentBlog" :allList="allList" @showBlogDetail="showBlogDetail" />
      </template>
    </div>
  </template>

  <script setup lang="ts">
  import { ref, onMounted } from 'vue'
  import BlogArticles from './components/BlogArticles.vue'
  import BlogDetail from './components/BlogDetail.vue'
  import type { ComponentPublicInstance } from 'vue'

  // 解决模块导入问题
  // @ts-ignore
  import { getnav, getnewList, getnavList, getsidebar, getdetail } from '@/api/blog'
  
  // 定义API响应类型
  interface ApiResponse<T> {
    code: number
    data: T
    message?: string
  }
  
  interface Post {
    id: number
    title: string
    description: string
    image: string
    thumbnail: string
    excerpt: string
    published_at: string
    content?: string
    header_image?: string
    seo_title?: string
    category: {
      name: string
    }
  }

  interface MenuItem {
    id: number
    seo_title: string
    name: string
    slug: string
  }

  const menuItems = ref<MenuItem[]>([])

  const activeIndex = ref('0')
  const blogTitle = ref('')
  const currentBlog = ref<Post | null>(null)
  const blogNav = ref<any[]>([])
  const featuredPosts = ref<Post[]>([])
  const allList = ref<any[]>([])
  const recentPosts = ref<Post[]>([])
  const blogDetail = ref<Post | null>(null)



  //博客导航
  const getnavFn = async () => {
    try {
      // 首先将结果转为any类型，然后再进行类型检查
      const res = await getnav() as any
      if (res && typeof res.code === 'number' && res.code === 200 && res.data) {
        blogNav.value = res.data
      }
      //头插入一行数据home
      if (Array.isArray(blogNav.value)) {
        blogNav.value.unshift({
            id: 0,
            seo_title: 'Style For Every Moment',
            name: 'Home',
            slug: 'Home',
        })
      }
      // console.log('blogNav', blogNav.value)
      menuItems.value = blogNav.value
    } catch (error) {
      console.error('获取博客导航失败', error)
    }
  }
  
  const handleMenuClick = (item: any) => {
    // 处理菜单选择
    console.log('Selected menu:',item)
    blogTitle.value = item.seo_title
    GetnavList(item.id)
  }
  
  //博客列表
  const GetnavList = async (id: number) => {
    console.log('id', id)
    if(id == 0){
        activeIndex.value = '0'
        //首页列表
        GetnewList()
        Getsidebar()
    }else{
        //其他列表
        const res = await getnavList(id) as any
        currentBlog.value = null
        activeIndex.value = id.toString()
        console.log('res', res)
        if (res && res.data && res.data[0] && res.data[0].list) {
            featuredPosts.value = res.data[0].list
        }
    }
  }
  
  //博客侧栏
  const Getsidebar = async () => {
    const res = await getsidebar() as any
    console.log('res', res)
    if (res && res.data) {
        recentPosts.value = res.data
        // console.log('recentPosts', recentPosts.value)
    }
  }

  //博客首页
  const GetnewList = async () => {
    const res = await getnewList() as any
    if (res && res.data) {
        featuredPosts.value = res.data
        // console.log('featuredPosts', featuredPosts.value)
        Getsidebar()
    }
  }
  
  //博客详情
  const Getdetail = async (id: number) => {
    try {
      const res = await getdetail(id) as any
      if (res && res.data) {
        blogDetail.value = res.data
        return res
      }
    } catch (error) {
      console.error('获取博客详情失败', error)
    }
  }
  const showBlogDetail = async (blog: Post) => {
    if (blog.id) {
      try {
        const res = await Getdetail(blog.id)
        if (res?.data) {
          currentBlog.value = blog
          // 切换到Home导航
          activeIndex.value = '0'
          blogTitle.value = 'Style For Every Moment'
        }
      } catch (error) {
      }
    }
  }
//全部列表
const GetallList = async () => {
  const res = await getnavList(0)
  allList.value = res.data
}
  onMounted(() => {
    GetnewList()

  })
  getnavFn()
  GetallList()
  </script>


  <style scoped>
  @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap');

  .blog-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    font-family: 'Montserrat', sans-serif;
    color: #333;
    position: relative;
  }

  .blog-categories {
    margin-bottom: 0;
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    background-color: #000;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.15);
    z-index: 10;
    transition: all 0.3s ease;
  }

  .categories-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
  }

  .blog-categories :deep(.ant-menu) {
    border-bottom: none;
    display: flex;
    justify-content: center;
    background-color: #000;
  }

  .blog-categories :deep(.ant-menu-horizontal) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  }

  .blog-categories :deep(.ant-menu-item) {
    font-size: .875rem;
    font-weight: 600;
    height: 60px;
    line-height: 60px;
    transition: all 0.3s ease;
    margin: 0 15px;
    padding: 0 10px;
    letter-spacing: 0.5px;
    color: #fff;
    border-bottom: 2px solid transparent;
    position: relative;
  }

  .blog-categories :deep(.ant-menu-item::after) {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 50%;
    background: #fff;
    transition: all 0.3s ease;
    transform: translateX(-50%);
  }

  .blog-categories :deep(.ant-menu-item:hover::after) {
    width: 100%;
  }

  .blog-categories :deep(.ant-menu-item-selected) {
    color: #fff !important;
    font-weight: 700;
    border-bottom-color: transparent;
  }

  .blog-categories :deep(.ant-menu-item-selected::after) {
    width: 100%;
  }

  .blog-categories :deep(.ant-menu-item:hover) {
    color: #fff;
    transform: translateY(-2px);
  }

  /* 为导航添加悬停效果 */
  .blog-categories:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
  }

  .blog-header {
    margin-top: 60px;
    margin-bottom: 60px;
    position: relative;
    padding: 40px 0;
    text-align: center;
    background: linear-gradient(90deg, rgba(240,240,240,0.5) 0%, rgba(255,255,255,1) 50%, rgba(240,240,240,0.5) 100%);
    border-radius: 10px;
    overflow: hidden;
  }

  .blog-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, transparent 48%, rgba(0,0,0,0.05) 50%, transparent 52%);
    background-size: 10px 10px;
    z-index: 1;
  }

  .blog-title {
      font-size: 60px;
      font-weight: 800;
      text-align: center;
      position: relative;
      letter-spacing: 1px;
      color: #000;
      margin: 0;
      text-transform: uppercase;
      z-index: 2;
      background: linear-gradient(to right, #000, #333);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: titleShine 8s infinite linear;
  }
  
  @keyframes titleShine {
    0% {
      background-position: 0%;
    }
    100% {
      background-position: 200%;
    }
  }
  
  .blog-content {
    margin-top: 30px;
  }

  .post-card {
    margin-bottom: 40px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border-radius: 12px;
    overflow: hidden;
    background-color: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    position: relative;
    z-index: 1;
    border: 1px solid rgba(0,0,0,0.05);
  }
  
  .post-card:hover {
    transform: translateY(-12px) scale(1.01);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    z-index: 2;
  }

  .post-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(90deg, #000 0%, #444 100%);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
  }

  .post-card:hover::after {
    transform: scaleX(1);
  }

  .post-image-wrapper {
    position: relative;
    overflow: hidden;
    height: 320px;
  }

  .post-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease, filter 0.7s ease;
  }
  
  .post-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.7));
    opacity: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.4s ease;
  }

  .overlay-content {
    transform: translateY(20px);
    transition: transform 0.4s ease;
  }

  .read-now {
    color: white;
    font-weight: 600;
    font-size: 18px;
    padding: 12px 24px;
    border: 2px solid white;
    border-radius: 30px;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
  }

  .post-card:hover .post-image {
    transform: scale(1.1);
    filter: blur(2px);
  }

  .post-card:hover .post-overlay {
    opacity: 1;
  }

  .post-card:hover .overlay-content {
    transform: translateY(0);
  }

  .post-info {
    padding: 30px;
    line-height: 1.5;
    background-color: #fff;
    position: relative;
  }

  .post-meta {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    font-size: 14px;
    color: #777;
  }

  .post-date {
    font-weight: 500;
  }

  .post-divider {
    width: 4px;
    height: 4px;
    background-color: #000;
    border-radius: 50%;
    margin: 0 10px;
  }

  .post-category {
    font-weight: 600;
    color: #000;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .post-title {
    margin: 0 0 20px 0;
    font-size: 24px;
    font-weight: 700;
    color: #000;
    line-height: 1.3;
    transition: color 0.3s;
  }
  
  .post-title:hover {
    color: #444;
  }
  
  .post-info .description {
    margin: 0 0 25px 0;
    line-height: 1.6;
    font-size: 16px;
    color: #555;
  }

  .post-footer {
    display: flex;
    justify-content: flex-start;
  }

  .read-more-btn {
    display: inline-flex;
    align-items: center;
    background: none;
    border: none;
    font-size: 16px;
    font-weight: 600;
    color: #000;
    padding: 0;
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease;
  }

  .read-more-btn::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #000;
    transform: scaleX(0.3);
    transform-origin: left;
    transition: transform 0.3s ease;
  }

  .read-more-btn:hover::after {
    transform: scaleX(1);
  }

  .btn-icon {
    margin-left: 8px;
    transition: transform 0.3s ease;
  }

  .read-more-btn:hover .btn-icon {
    transform: translateX(5px);
  }

  /* 侧边栏容器 */
  .sidebar-container {
    position: relative;
    height: 100%;
  }

  .sidebar {
    background-color: #f9f9f9;
    padding: 35px;
    position: sticky;
    top: 20px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    scrollbar-width: thin;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  }

  .sidebar::-webkit-scrollbar {
    width: 4px;
  }

  .sidebar::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
  }

  .sidebar::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
  }

  .sidebar-title {
    width: 100%;
    padding: 0 0 16px 0;
    text-align: center;
    font-weight: 800;
    font-size: 24px;
    color: #000;
    letter-spacing: 1px;
    position: relative;
    margin: 0 0 35px 0;
    text-transform: uppercase;
  }
  
  .sidebar-title::after {
    content: '';
    display: block;
    width: 40px;
    height: 3px;
    background: linear-gradient(90deg, #000 0%, #444 100%);
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  }
  
  .sidebar-content {
    padding: 0;
  }
  
  .sidebar-item {
    display: flex;
    margin-bottom: 35px;
    gap: 20px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    padding-bottom: 30px;
    border-bottom: 1px solid #eee;
  }
  
  .sidebar-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
  }
  
  .sidebar-item:hover {
    transform: translateX(8px);
  }
  
  .sidebar-image-wrapper {
    position: relative;
    width: 110px;
    height: 150px;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    flex-shrink: 0;
  }
  
  .sidebar-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease, filter 0.5s ease;
  }
  
  .sidebar-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.7));
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  
  .sidebar-item:hover .sidebar-image {
    transform: scale(1.1);
    filter: blur(1px);
  }
  
  .sidebar-item:hover .sidebar-overlay {
    opacity: 1;
  }
  
  .image-index {
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    z-index: 1;
  }
  
  .sidebar-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  
  .sidebar-title-text {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 12px 0;
    line-height: 1.4;
    color: #000;
    transition: color 0.3s;
  }
  
  .sidebar-title-text:hover {
    color: #444;
    cursor: pointer;
  }
  
  .sidebar-desc {
    font-size: 14px;
    color: #555;
    margin: 0 0 20px 0;
    line-height: 1.5;
  }
  
  .sidebar-read-more {
    font-size: 14px;
    color: #000;
    font-weight: 600;
    padding: 0;
    border: none;
    background: none;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: auto;
    align-self: flex-start;
  }
  
  .arrow {
    margin-left: 6px;
    transition: transform 0.3s ease;
  }
  
  .sidebar-read-more:hover .arrow {
    transform: translateX(5px);
  }

  .blog-divider {
    display: flex;
    align-items: center;
    margin: 80px 0 50px;
  }

  .divider-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, transparent, #000, transparent);
  }

  .divider-text {
    padding: 0 20px;
    font-size: 32px;
    font-weight: 800;
    color: #000;
    text-transform: uppercase;
    letter-spacing: 1px;
  }

  /* 空状态样式 */
  .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin-bottom: 40px;
  }

  .empty-image {
    width: 200px;
    height: 200px;
    margin-bottom: 30px;
  }

  .empty-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .empty-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 15px;
    color: #333;
  }

  .empty-description {
    font-size: 16px;
    color: #666;
    max-width: 400px;
    line-height: 1.6;
  }

  /* 侧边栏空状态 */
  .sidebar-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 0;
    text-align: center;
  }

  .sidebar-empty-image {
    width: 120px;
    height: 120px;
    margin-bottom: 15px;
  }

  .sidebar-empty-text {
    font-size: 16px;
    color: #666;
    margin: 0;
  }

  /* 移动端适配 */
  @media screen and (max-width: 768px) {
    .blog-container {
      padding: 10px;
    }

    .blog-categories {
      margin-bottom: 0;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }

    .categories-wrapper {
      padding: 0 10px;
      min-width: 100%;
    }

    .mobile-menu {
      display: flex;
      flex-wrap: nowrap;
      width: 100%;
      min-width: max-content;
      justify-content: flex-start;
    }

    .blog-categories :deep(.ant-menu) {
      justify-content: flex-start;
    }

    .blog-categories :deep(.ant-menu-item) {
      font-size: .75rem;
      height: 50px;
      line-height: 50px;
      padding: 0 10px;
      white-space: nowrap;
      margin: 0 8px;
    }

    .blog-header {
      margin-top: 30px;
      margin-bottom: 30px;
      padding: 20px 0;
    }

    .blog-title {
      font-size: 32px;
    }

    .post-card {
      margin-bottom: 25px;
    }

    .post-image-wrapper {
      height: 200px;
    }

    .post-info {
      padding: 20px;
    }

    .post-title {
      font-size: 20px;
      margin-bottom: 15px;
    }

    .post-info .description {
      font-size: 14px;
      margin-bottom: 15px;
    }

    .sidebar {
      margin-top: 30px;
      position: relative;
      top: 0;
      max-height: none;
      padding: 25px;
    }

    .sidebar-item {
      margin-bottom: 25px;
      padding-bottom: 25px;
    }

    .sidebar-image-wrapper {
      width: 80px;
      height: 110px;
    }

    .sidebar-title-text {
      font-size: 16px;
      margin-bottom: 8px;
    }

    .sidebar-desc {
      font-size: 13px;
      margin-bottom: 10px;
    }

    .blog-divider {
      margin: 40px 0 30px;
    }

    .divider-text {
      font-size: 24px;
      padding: 0 10px;
    }

    .empty-state {
      padding: 40px 15px;
    }
    
    .empty-image {
      width: 150px;
      height: 150px;
      margin-bottom: 20px;
    }
    
    .empty-title {
      font-size: 20px;
      margin-bottom: 10px;
    }
    
    .empty-description {
      font-size: 14px;
    }
    
    .sidebar-empty-image {
      width: 100px;
      height: 100px;
    }
    
    .sidebar-empty-text {
      font-size: 14px;
    }
  }

  /* 平板适配 */
  @media screen and (min-width: 769px) and (max-width: 1024px) {
    .blog-header {
      margin: 40px 0;
    }

    .blog-title {
      font-size: 42px;
    }

    .post-image-wrapper {
      height: 250px;
    }

    .sidebar-image-wrapper {
      width: 90px;
      height: 125px;
    }

    .blog-divider {
      margin: 60px 0 40px;
    }

    .divider-text {
      font-size: 28px;
    }
  }
  </style>
